<template>
  <div class="ckeditor-container">
    <h3>富文本编辑器示例</h3>
    <ckeditor
        :editor="ClassicEditor"
        v-model="editorData"
        :config="editorConfig"
        @ready="onEditorReady"
        @input="onEditorInput"
    ></ckeditor>

    <div class="editor-output mt-4">
      <h4>编辑器内容预览：</h4>
      <div v-html="editorData" class="preview-content"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import CKEditor from '@ckeditor/ckeditor5-vue';

// 引入 CKEditor 组件
const { component: Ckeditor } = CKEditor;

// 编辑器内容
const editorData = ref('<p>请输入内容...</p>');

// 编辑器配置
const editorConfig = {
  // 工具栏配置
  toolbar: {
    items: [
      'heading', '|',
      'bold', 'italic', 'underline', 'strikethrough', '|',
      'alignment', '|',
      'numberedList', 'bulletedList', '|',
      'indent', 'outdent', '|',
      'link', 'imageUpload', '|',
      'blockQuote', 'insertTable', '|',
      'undo', 'redo'
    ]
  },
  // 图片上传配置（如果需要）
  image: {
    toolbar: [
      'imageStyle:full',
      'imageStyle:side',
      '|',
      'imageTextAlternative'
    ]
  },
  // 表格配置
  table: {
    contentToolbar: [
      'tableColumn',
      'tableRow',
      'mergeTableCells'
    ]
  },
  // 语言配置
  language: 'zh-cn'
};

// 编辑器准备就绪时的回调
const onEditorReady = (editor) => {
  console.log('编辑器已准备就绪', editor);
  // 可以在这里设置编辑器的其他属性
};

// 编辑器内容变化时的回调
const onEditorInput = (event, editor) => {
  const data = editor.getData();
  console.log('编辑器内容变化:', data);
  // 可以在这里处理内容变化逻辑
};
</script>

<style scoped>
.ckeditor-container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;
}

.preview-content {
  border: 1px solid #e5e7eb;
  padding: 15px;
  min-height: 100px;
  border-radius: 4px;
}
</style>
